<template>
	<view class="container bh-justify-space-around">
		<view class="tab-li" v-for="(item, index) in list" :key="index" @click="totar(index)">
			<image :src="index == currentTabIndex ? item.selectedIconPath : item.iconPath" mode=""></image>
			<view :class="index == currentTabIndex ? 'c0' : 'c9'">
				{{ item.text }}
				<view v-if="index == 2 && parseMessageCount" class="babel">{{ parseMessageCount }}</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	name: 'BhTabbarfooternew',
	emits: ['changeFooterTab'],
	props: {
		current: {
			type: [Number, String],
			default: 0
		},
		messageCount: {
			type: Number,
			default: 0
		}

	},
	data() {
		return {
			currentTabIndex: this.current,
			list: [
				{
					"index": 0,
					"pagePath": "/pages/home/home",
					"iconPath": "../../static/images/home/home_home1.svg",
					"selectedIconPath": "../../static/images/home/home_home_ac.svg",
					"text": "首页"
				},
				{
					"index": 1,
					"pagePath": "/pages/home/home",
					"iconPath": "../../static/images/home/home_add.png",
					"selectedIconPath": "../../static/images/home/home_add.png",
					"text": ""
				},
				{
					"index": 2,
					"pagePath": "/pages/home/home",
					"iconPath": "../../static/images/home/home_my.svg",
					"selectedIconPath": "../../static/images/home/home_my1.svg",
					"text": "我的"
				},
			]
		}
	},
	methods: {
		totar(index) {
			this.$emit('changeFooterTab', this.list[index])
			// uni.reLaunch({
			// 	url: path,
			// });
		}
	},
	computed: {
		parseMessageCount() {
			if (this.messageCount >= 100) {
				return '99+'
			} else if (this.messageCount > 0) {
				return this.messageCount
			}
			return ''
		}
	}

}
</script>
<style scoped lang="scss">
@import url(../../static/css/base.css);

.container {
	/* 蒙版 */

	position: fixed;
	box-sizing: border-box;
	left: 0;
	bottom: 0;
	width: 100vw;
	height: 144rpx;
	background: #FFFFFF;

	box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
	background-size: 100%;
	opacity: 1;
	z-index: 2;
	padding: 20rpx 40rpx;
	display: flex;

	.tab-li {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 24rpx;
		font-weight: 600;
		position: relative;

		&:nth-child(2) {
			position: relative;

			image {
				width: 32rpx;
				height: 32rpx;
				background-color: #F8D247;
				position: absolute;
				padding: 20rpx;
				border-radius: 12rpx;
			}
		}

		.babel {
			top: -12rpx;
			right: -15rpx;
			position: absolute;
			border: 1px solid #ff3b3b;
			border-radius: 50%;
			width: 30rpx;
			height: 30rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0rpx;
			background: #ff3b3b;
			color: white;
			font-size: 18rpx;
		}
	}

	image {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 10rpx;
	}
}
</style>